<template>
  <el-header class="header">
    <div class="logo">管理系统</div>
    <el-dropdown trigger="click">
      <div class="avatar">
      <span>{{useStaffStaffStore().staffInfo.staff.realName}}</span>
        <img :src="useStaffStaffStore().staffInfo.staff.photoUrl" alt="avatar" />
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="router.push('staffInfo')">
            <el-icon><User /></el-icon>
            个人信息
          </el-dropdown-item>
          <el-dropdown-item divided @click="out">
            <el-icon><SwitchButton /></el-icon>
            退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </el-header>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import {useRouter} from "vue-router";
import { ref } from 'vue';
import {useStaffStaffStore} from "@/stores/staff.js";
const router = useRouter();

const user = ref({ username: '' });

const out = async () => {
  localStorage.removeItem("token")
  await useStaffStaffStore().clearStaff()
    ElMessage({
      message: '操作成功',
      type: 'success',
      duration: 500
    })
    await router.push("login")
}
</script>

<style scoped lang="less">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #545c64;
  color: #fff;
  padding: 0 20px;
}

.logo {
  font-size: 20px;
}

.header-right {
  display: flex;
  align-items: center;
}
.avatar{
  cursor: pointer;
  display: flex;
    align-items: center;
  >img{
    width: 50px;
    height: 50px;
    border-radius: 25px;
  }
  >span{
    color: #fff;
    margin-right: 20px;
  }
      
}
</style>
